<!--单位管理界面 unitManage-->
<template>
  <div class="unitManageBody">
    <unitManageDialog ref="unitManageDialog" />
    <div class="con">
      <div class="tree-left">
        <div style="margin-bottom: 5px;">
          <el-input size="medium" placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
        </div>
        <div class="btns">
          <el-button type="primary" size="mini" @click="addMenu">新增同级</el-button>
          <el-button type="primary" size="mini" @click="addMenuChild">新增子级</el-button>
          <el-button type="primary" size="mini" @click="editMenu">修改</el-button>
          <el-button type="danger" size="mini" @click="deleteMenu" class="del-btn">删除</el-button>
        </div>
        <el-scrollbar style="height:calc(100% - 55px);width: 100%;">
          <el-tree class="filter-tree" :data="unitTree" :default-expanded-keys="defaultExpanded"
            :current-node-key='defaultDevice' :expand-on-click-node="true" node-key="id" :props="defaultProps"
            :highlight-current='true' :filter-node-method="filterNode" ref="tree" @node-click="recordTreeClick">
            <template #default="{ node }">
              <span class="custom-tree-node" style="font-size:13px">
                <img src="../../../public/static/image/elTree/1.9.png" />
                {{ node.label }}
              </span>
            </template>
          </el-tree>
        </el-scrollbar>
      </div>
      <div class="right-table">
        <!-- <div class="Files-top">
                        <div class="ic-left">
                        <span>组织架构</span>
                        </div>
                        <div class="btns">
                        </div>
                  </div> -->
        <div class="basic-information unititem">
          <div class="item-top">
            <span>基本信息</span>
          </div>
          <el-scrollbar style="height:calc(100% - 55px);width: 100%;">
            <div class="item-con">
              <div class="item">
                <div class="item-left">单位名称：</div>
                <div class="item-right">{{detailsData.name}}</div>
              </div>
              <div class="item">
                <div class="item-left">全称：</div>
                <div class="item-right">{{detailsData.fullName}}</div>
              </div>
              <div class="item">
                <div class="item-left">负责人：</div>
                <div class="item-right">{{detailsData.leader}}</div>
              </div>
              <div class="item">
                <div class="item-left">联系方式：</div>
                <div class="item-right">{{detailsData.phoneNum}}</div>
              </div>
              <div class="item">
                <div class="item-left">编号：</div>
                <div class="item-right">{{detailsData.unitCode}}</div>
              </div>
              <div class="item">
                <div class="item-left">接入时间：</div>
                <div class="item-right">{{new Date(detailsData.joinTime).formatByTime()}}</div>
              </div>
              <div class="item">
                <div class="item-left">地理坐标：</div>
                <div class="item-right">{{detailsData.location}}</div>
              </div>
              <div class="item">
                <div class="item-left">地址：</div>
                <div class="item-right">{{detailsData.address}}</div>
              </div>
              <div class="item">
                <div class="item-left">合同到期时间：</div>
                <div class="item-right">{{new Date(detailsData.expirationTime).formatByTime()}}</div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div class="device-information unititem">
          <div class="item-top">
            <span>设备信息</span>
          </div>
          <el-scrollbar style="height:calc(100% - 55px);width: 100%;">
            <div class="item-con">
              <div class="item">
                <div class="item-left">电房数量：</div>
                <div class="item-right">{{detailsData.roomCount}}</div>
              </div>
              <div class="item">
                <div class="item-left">负荷容量：</div>
                <div class="item-right">{{detailsData.loadCapacity}}</div>
              </div>
              <div class="item">
                <div class="item-left">变压器总容量：</div>
                <div class="item-right">{{detailsData.capacity}}</div>
              </div>
              <div class="item">
                <div class="item-left">进线来源：</div>
                <div class="item-right">{{detailsData.inletWire}}</div>
              </div>
              <div class="item">
                <div class="item-left">变压器数量：</div>
                <div class="item-right">{{detailsData.transformerCount}}</div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div class="emeo-information unititem">
          <div class="item-top">
            <span>备注</span>
          </div>
          <div class="item-con">
            <div class="item">
              <div class="item-left">备注：</div>
              <div class="item-right">{{detailsData.memo}}</div>
            </div>

          </div>

        </div>


      </div>

    </div>



  </div>
</template>

<script>
  import unitManageDialog from './unitManageDialog.vue'
  import {getUnitTree,saveUnit} from '../../api/abbNewApi'
  export default {
    components: {
      unitManageDialog,
    },
    props: {},
    data () {
      return {
        nowMenu: undefined,
        treeData: [], //树形结构
        filterText: "",
        defaultProps: {
          children: 'next',
          label: 'name',
        },
        defaultExpanded: [],
        defaultDevice: "",
        detailsData: {},
        unitTree: []
      }
    },
    created () {},
    mounted () {

      this.getUnitTreeFun()
    

    },
    destroyed () {},
    computed: {
      getUnitTree () {
        let tree=this.$store.unitStore.getters.getUnitTree
        if(isempty(tree)) {
          return []
        } else {
          return [tree]
        }
      },
      //   unitTree(){
      //        return [this.$store.unitStore.state.nowUnit]
      //     },
      getResourcesByName () {
        return this.$store.resourcesStore.getters.getResourcesByName
      },
      getBackgroudImageStyle () {
        return this.$store.resourcesStore.getters.getBackgroudImageStyle
      }
    },
    watch: {
      filterText (val) {
        this.$refs.tree.filter(val);
      },
      unitTree (val) {
        console.log("侦听",val);
        this.$nextTick(() => {
          this.defaultExpanded=[val[0].id]
          this.defaultDevice=val[0].id
          //默认选中
          this.$refs['tree'].setCurrentKey(this.defaultDevice);
        })

      }
    },
    methods: {
      // 树形筛选
      filterNode (value,data) {
        if(!value) return true;
        return data.name.indexOf(value)!==-1;
      },

      clear () {
        // this.$refs.hTreeTable.clear()
      },
      getUnitTreeFun () {
        getUnitTree().then(res => {
          this.unitTree=[res.data]
          this.detailsData=this.unitTree[0]
          // this.$store.unitStore.state.unitTree = res.data
        })
      },
      //点击树形结构
      recordTreeClick (data) {
        this.detailsData=data
        this.nowMenu=data
      },

      //添加同级
      addMenu () {
        if(this.nowMenu==undefined) {
          this.$message({showClose: true,message: '请选择同级单位！',type: 'warning'});
          return
        }
        if(isempty(this.nowMenu.parentId)) {
          this.$message({showClose: true,message: '该单位为基础单位，不能添加同级单位!',type: 'warning'});
          return
        }
        var dialog=this.$dialogMethod.createDialog(unitManageDialog)
        dialog.open(undefined,item => {
          saveUnit(undefined,item.type,this.nowMenu.parentId,item.unitCode,item.name,item.fullName,item.address,item.leader,item.phoneNum,item.memo,item.sort,item.capacity,item.inletWire,item.location,item.joinTime,item.expirationTime,item.roomCount,item.transformerCount,item.loadCapacity).then(res => {
            if(res.success) {
              this.nowMenu=undefined
              this.$store.unitStore.commit('getUnitTree')
              this.$message({message: '保存成功',type: 'success'});
              this.getUnitTreeFun()
            } else {
              this.$message.error('保存失败');
            }
          }).catch(err => {
            this.$message.error('保存失败');
          })
          // this.$api.unitApi.saveUnit(undefined, item.type, this.nowMenu.parentId, item.unitCode, item.name, item.fullName, item.address, item.leader, item.phoneNum, item.memo, item.sort, item.capacity, item.inletWire, item.location, item.joinTime, item.expirationTime, item.roomCount, item.transformerCount, item.loadCapacity, respon => {
          // this.nowMenu = undefined
          // this.$store.unitStore.commit('getUnitTree')
          // this.$dialogMethod.showMessage('保存成功')
          // this.clear()
          // }, err => {
          //     this.$dialogMethod.showMessage('保存失败')
          // })
        })
      },
      //添加子级
      addMenuChild () {
        // if(this.nowMenu == undefined) {
        // 	this.$dialogMethod.showMessage("请先选中父级单位!")
        // 	return
        // }
        var dialog=this.$dialogMethod.createDialog(unitManageDialog)
        dialog.open(undefined,item => {
          //新接口
          saveUnit(undefined,item.type,this.nowMenu.id,item.unitCode,item.name,item.fullName,item.address,item.leader,item.phoneNum,item.memo,item.sort,item.capacity,item.inletWire,item.location,item.joinTime,item.expirationTime,item.roomCount,item.transformerCount,item.loadCapacity).then(res => {
            if(res.success) {
              this.nowMenu=undefined
              this.$store.unitStore.commit('getUnitTree')
              this.$message({message: '保存成功',type: 'success'});
              this.getUnitTreeFun()
            } else {
              this.$message.error('保存失败');

            }

          }).catch(err => {
            this.$message.error('保存失败');
          })

          //旧接口
          // this.$api.unitApi.saveUnit(undefined, item.type, this.nowMenu.id, item.unitCode, item.name, item.fullName, item.address, item.leader, item.phoneNum, item.memo, item.sort, item.capacity, item.inletWire, item.location, item.joinTime, item.expirationTime, item.roomCount, item.transformerCount, item.loadCapacity, respon => {
          // this.nowMenu = undefined

          // this.$store.unitStore.commit('getUnitTree')
          // this.$dialogMethod.showMessage('保存成功')
          //  this.getUnitTreeFun()
          // this.clear()
          // }, err => {
          //     this.$dialogMethod.showMessage('保存失败')
          // })
        })
      },
      //修改
      editMenu () {
        if(this.nowMenu==undefined) {
          this.$message({showClose: true,message: '请先选中要编辑的web单位',type: 'warning'});
          return
        }
        var dialog=this.$dialogMethod.createDialog(unitManageDialog)
        dialog.open(this.nowMenu,item => {

          //新接口
          saveUnit(item.id,item.type,item.parentId,item.unitCode,item.name,item.fullName,item.address,item.leader,item.phoneNum,item.memo,item.sort,item.capacity,item.inletWire,item.location,item.joinTime,item.expirationTime,item.roomCount,item.transformerCount,item.loadCapacity).then(res => {
            if(res.success) {
              this.nowMenu=undefined
              this.$store.unitStore.commit('getUnitTree')
              this.$message({message: '修改成功',type: 'success'});
              this.getUnitTreeFun()
            } else {
              this.$message.error('修改失败');

            }

          }).catch(err => {
            this.$message.error('修改失败');
          })
          // this.$api.unitApi.saveUnit( item.id, item.type, item.parentId, item.unitCode, item.name, item.fullName, item.address, item.leader, item.phoneNum, item.memo, item.sort, item.capacity, item.inletWire, item.location, item.joinTime, item.expirationTime, item.roomCount, item.transformerCount, item.loadCapacity, respon => {
          // this.nowMenu = undefined
          // this.$store.unitStore.commit('getUnitTree')
          // this.$message({ message: '修改成功', type: 'success' });
          //  this.getUnitTreeFun()
          // }, err => {
          //     this.$message.error('修改失败');
          // })
        })
      },
      //删除
      deleteMenu () {
        if(this.nowMenu==undefined) {
          this.$message({showClose: true,message: '请先选中要删除的单位!',type: 'warning'});
          return
        }
        var id=this.nowMenu.id //当前选中web单位的id
        var name=this.nowMenu.name //当前选中web单位的名称
       
        this.$confirm(`是否要删除此web单位？`,'提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
               //删除接口
              this.$api.unitApi.delUnit(id,respon => {
                this.nowMenu=undefined
                this.$store.unitStore.commit('getUnitTree')
                this.getUnitTreeFun()
                this.$message({message: '删除成功',type: 'success'});
              },respon => {
                this.$message.error('修改失败');
                //err(respon)
              })    
            }).catch(() => {
              // ...
            });
      },
      refresh () {
        this.$store.unitStore.commit('getUnitTree')
      },

      changeActive (val) {
        this.nowMenu=val
      },
      handlerExpand (m) {
        m.isExpand=!m.isExpand
      },
    }
  }
</script>

<style scoped lang='scss'>
  .unitManageBody {
    overflow: hidden;

    .con {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      display: flex;

      .search-input-btn {
        width: 100%;
        height: 36px;

        .my-search-i {
          width: 100%;
          display: flex;
          align-items: center;
        }
      }

      .paging {
        display: flex;
        justify-content: flex-end;
        margin-top: 15px;
      }

      .tree-left {
        width: 300px;
        height: 100%;
        padding: 12px;
        box-sizing: border-box;
        background-color: #fff;
        margin-right: 8px;

        .btns {
          display: flex;
          // justify-content: space-evenly;
          margin-bottom: 8px;
          margin-top: 10px;

          .el-button--mini {
            padding: 7px 10px !important;
            margin-right: 4px !important;
          }

          .el-button+.el-button {
            margin-left: 0px;
          }
        }


        .search {
          display: flex;
          justify-content: center;
          margin-bottom: 12px;
        }

      }

      .right-table {
        width: calc(100% - 3.08rem);
        height: 100%;
        padding: 12px 20px 20px 20px;
        box-sizing: border-box;
        background-color: #fff;
        position: relative;
      }
    }
  }

  .Files-top {
    margin-bottom: 20px;
  }

  .unititem {
    width: 100%;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 40px;

    .item-top {
      width: 100%;
      height: 44px;
      background-color: #368ed9;
      // background-color: #2a8e7c;
      
      line-height: 44px;

      span {
        color: #fff;
        font-size: 16px;
        margin-left: 20px;
      }
    }

    .item-con {
      display: flex;
      flex-wrap: wrap;
      margin-top: 20px;

      .item {
        width: 4rem;
        height: 45px;
        display: flex;

        .item-left {
          width: 120px;
          height: 100%;
          line-height: 45px;
          text-align: right;
          color: #999999;
          font-size: 16px;
        }

        .item-right {
          width: 2.8rem;
          height: 100%;
          line-height: 45px;
          color: #1a1a1a;
          font-size: 16px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .basic-information {
    height: 220px;
  }

  .device-information {
    height: 174px;
  }

  .emeo-information {
    height: 130px;

    .item {
      width: 8rem;

      .item-right {
        width: 6rem;
      }
    }
  }
</style>